<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import { useUserStore } from '@/stores'
	const userStore = useUserStore()
</script>
<template>
	<view class="list mlr-12">
		<TnButton only-button @click="tnNavPage('/home-page/setting/index')">
			<view class="list-item">
				<view class="left">
					<view class="text"> 设备编码 </view>
				</view>
				<view class="right mr-8">
					<view class="icon font-size-12">
						{{userStore.snDetail?.BindingSN[0]}}
					</view>
				</view>
			</view>
		</TnButton>
		<TnButton only-button @click="tnNavPage('/home-page/clause/index')">
			<view class="list-item">
				<view class="left">
					<view class="text"> 版本号 </view>
				</view>
				<view class="right mr-8">
					<view class="icon font-size-12">
						v1.0.0
					</view>
				</view>
			</view>
		</TnButton>
	</view>
</template>
<style lang="scss" scoped>
	/* 列表 start */
	.list {
		position: relative;
		width: auto;
		margin-top: 32rpx;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 0 16rpx;

		.list-item {
			width: 100%;
			padding: 24rpx 0rpx;
			display: flex;
			align-items: center;

			.left {
				flex: 1;
				display: flex;
				align-items: center;

				.icon {
					font-size: 24rpx;
					color: #bfbfbf;
				}

				.text {
					margin:0 16rpx;
					font-family:
						PingFang SC,
						PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #4f4f62;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					vertical-align: middle;
					line-height: 1;
				}
			}

			.right {
				margin:0 16rpx;
				flex-grow: 0;
				flex-shrink: 0;

				.icon {
					font-size: 26rpx;
					color: var(--tn-color-gray);
				}

				.text {
					font-size: 26rpx;
				}
			}
		}
	}
	.my-icons {
		width: 36rpx;
		vertical-align: middle;
		margin-top: -10rpx;
	}
	:deep(.tn-button--only-button){
		border-bottom: 1px solid #f6f6f6;
	}
</style>